<template>
  <div>
    <add @add-brand="addBrand"></add>
    <search></search>
    <tab :brands="brands" @remove="removeBrand"></tab>
  </div>
</template>

<script>
import add from "./add";
import search from "./search";
import tab from "./tab";
export default {
  data() {
    return {
      brands: [],
    };
  },
  methods: {
    // 添加品牌
    addBrand(newBrand) {
      this.brands.push(newBrand);
      this.save();
    },
    // 删除品牌
    removeBrand(id) {
      this.brands = this.brands.filter((v) => v.id !== id);
      this.save();
    },
    // 保存到localstorage
    save() {
      localStorage.setItem("brands", JSON.stringify(this.brands));
    },
  },
  components: {
    add,
    search,
    tab,
  },
  mounted() {  //发送异步请求
    //从localStorage中取得商品
    let brands = JSON.parse(localStorage.getItem("brands"));
    brands && (this.brands = brands);
  },
};
</script>

<style>
</style>